﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>homePage</title>


    <link href="/css/default.css" rel="stylesheet" />
    <link href="/views/home/HomeView.css" rel="stylesheet" />
    <script src="/models/SampleListViewItemModel.js"></script>
    <script src="/viewModels/HomeViewModel.js"></script>
    <script src="/views/home/HomeView.js"></script>
</head>
<body>
    <!-- The content that will be loaded and displayed. -->
    <div class="fragment homepage">
        <header aria-label="Header content" role="banner">
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle" data-win-bind="textContent: dataContext.pageTitle"></span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <p>
                <span data-win-bind="textContent: dataContext.sampleText"></span>
            </p>
            <p>
                <button class="home-button" data-win-control="WinJS.UI.Button" data-win-bind="onclick:showMessageDialogCommandBind; textContent: dataContext.commandButtonText"></button>
            </p>
            <p>
                <div class="list-item-template" id="MyDataTemplate" data-win-control="WinJS.Binding.Template">
                    <div class="list-item-title" data-win-bind="innerText: title"></div>
                    <button class="list-item-button win-interactive" data-win-control="WinJS.UI.Button" data-win-bind="onclick:buttonClickCommandBind; innerText: title"></button>
                </div>

                <div class="list-items-title">Sample list items:</div>

                <div id="listView" class="list-items"
                     data-win-control="WinJS.UI.ListView"
                     data-win-bind="winControl.itemDataSource: dataContext.itemsSource; winControl.oniteminvoked: listItemInvokedBind"
                     data-win-options="{itemTemplate: select('#MyDataTemplate') }">
                </div>
            </p>
        </section>
    </div>
</body>
</html>
